<template>
  <div class="editcal">
    <div class="editcal-top">
      <el-button @click="addDomain" type="primary">新增字段</el-button>
      <el-button @click="addDomain2" type="primary">新增符号</el-button>
    </div>
    <el-form
      :inline="true"
      :model="dynamicValidateForm"
      ref="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
    >
      <el-form-item
        prop="field"
        :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
      >
        <el-select
          style="width: 150px"
          v-model="dynamicValidateForm.field"
          filterable
          placeholder="值"
        >
          <el-option
            v-for="item in formulaOperators"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>=</el-form-item>
      <el-form-item
        v-for="(domain, index) in dynamicValidateForm.formula"
        :key="domain.key"
        :prop="'formula.' + index + '.item'"
        :rules="{
          required: true,
          message: '请选择',
          trigger: 'blur',
        }"
        class="editcalformitem"
      >
        <el-select
          style="width: 150px"
          v-if="domain.itemType === '字段'"
          filterable
          v-model="domain.item"
          placeholder="字段"
        >
          <el-option
            v-for="item in formulaOperators"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>

        <el-select
          style="width: 80px"
          v-else
          v-model="domain.item"
          filterable
          placeholder="符号"
        >
          <el-option
            v-for="item in formulaFields"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
        <i @click="removeDomain(domain)" class="el-icon-error"></i>
        <!-- <el-button @click.prevent="removeDomain(domain)">删除</el-button> -->
      </el-form-item>
      <!-- <el-form-item>
        <el-button @click="addDomain" type="primary">新增字段</el-button>
        <el-button @click="addDomain2" type="primary">新增符号</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item> -->
    </el-form>

    <!-- <el-button type="primary" @click="submitForm('dynamicValidateForm')"
          >提交</el-button
        > -->
  </div>
</template>

<script>
import {
  formulaListApi,
  formulaCreateApi,
  formulaFieldsApi,
  formulaOperatorsApi,
  formulaUpdateApi,
} from "@/api/config";
const robj = {
  formula: [
    {
      itemType: "字段",
      item: "day_ahead_cleared_power",
      itemName: "日前出清电量",
    },
    {
      itemType: "符号",
      key: 1760705924471,
      item: "+",
    },
    {
      itemType: "字段",
      key: 1760705926279,
      item: "day_ahead_cleared_price",
      itemName: "日前出清电价",
    },
  ],
  field: "mid_long_term_power",
  fieldName: "中长期电量",
};

export default {
  props: {
    rowData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      dynamicValidateForm: {
        formula: [
          {
            itemType: "字段",
          },
        ],
        field: "",
      },
      formulaOperators: [],
      formulaFields: [],
    };
  },
  watch: {
    rowData: {
      handler(val) {
        console.log(val, "val9999999999999");

        if (val.id) {
          this.dynamicValidateForm = val;
        } else {
          this.dynamicValidateForm = {
            formula: [
              {
                itemType: "字段",
              },
            ],
            field: "",
          };
        }
      },
      deep: true,
    },
  },
  created() {
    this.init();
    console.log(this.rowData, "rowData22222222222222");

    // this.dynamicValidateForm = robj
  },
  methods: {
    async init() {
      const res1 = await formulaFieldsApi();
      const res2 = await formulaOperatorsApi();
      this.formulaOperators = res1;
      this.formulaFields = res2;
      // this.id = res.id
      // this.content = res.value
    },
    submitForm(formName = "dynamicValidateForm") {
      return new Promise((resolve, reject) => {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            console.log(this.dynamicValidateForm, "dynamicValidateForm");
            const obj = { ...this.dynamicValidateForm };
            obj.fieldName = this.formulaOperators.find(
              (item) => item.value === obj.field
            ).name;
            const formula = [...this.dynamicValidateForm.formula];
            formula.forEach((item) => {
              const obj = this.formulaOperators.find(
                (item1) => item1.value === item.item
              );
              if (obj) {
                item.itemName = obj.name;
              }
            });
            obj.formula = formula;
            console.log(obj, "obj-----------");
            resolve(obj);
            return obj;
            // if (this.rowData.id) {
            //   const res = await formulaUpdateApi(obj);
            //   if (res.id) {
            //     this.$message({
            //       message: `修改成功!`,
            //       type: "success",
            //     });
            //   } else {
            //     this.$message({
            //       message: `修改失败!`,
            //       type: "error",
            //     });
            //   }
            // } else {
            //   const res = await formulaCreateApi(obj);
            //   if (res.id) {
            //     this.$message({
            //       message: `保存成功!`,
            //       type: "success",
            //     });
            //   } else {
            //     this.$message({
            //       message: `保存失败!`,
            //       type: "error",
            //     });
            //   }
            // }

            //   alert("submit!");
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
    },
    resetForm(formName = "dynamicValidateForm") {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.formula.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.formula.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.formula.push({
        itemType: "字段",
        key: Date.now(),
      });
    },
    addDomain2() {
      this.dynamicValidateForm.formula.push({
        itemType: "符号",
        key: Date.now(),
      });
    },
  },
};
</script>
<style scoped lang="scss">
.editcal {
  padding: 0 24px;
  .editcal-top {
    margin-bottom: 24px;
  }

  .editcalformitem {
    position: relative;
    .el-icon-error {
      position: absolute;
      color: red;
      right: 10px;
      top: 14px;
      cursor: pointer;
    }
  }
}
</style>
